import React from 'react';
import { Select, Tag } from 'antd';
import { DotSplit } from '@/pages/Recruitment/components';
import { RESUME_LABEL_ENUM, RESUME_LABEL } from '@/pages/Recruitment/dictionary';

const { Option } = Select;
const SelectDuty = React.forwardRef(({ data, onChange, ...rest }, ref) => {
    {
        const showData = React.useMemo(() => {
            if (!data || !data.length) {
                return [];
            }
            return data.map(duty => {
                const { resumeId, channelName, dutyName, resumeLabel } = duty || {};
                const labelItem = RESUME_LABEL.find(item => item.value === resumeLabel) || {};
                const tag = RESUME_LABEL_ENUM.NONE !== resumeLabel
                    && <Tag color={labelItem.tagColor}>{labelItem.text}</Tag>;
                return { value: resumeId, data: [dutyName, channelName], tag, source: duty };
            });
        }, [data]);
        const handleChange = React.useCallback(
            value => {
                const dataItem = showData.find(item => item.value === value) || {};
                if (onChange) {
                    onChange(value, dataItem.source);
                }
            },
            [onChange, showData]
        );
        return (
            <Select ref={ref} onChange={handleChange} {...rest}>
                {showData.map(item => (
                    <Option value={item.value} key={item.value}>
                        <DotSplit data={item.data} tag={item.tag} />
                    </Option>
                ))}
            </Select>
        );
    }
});
export default SelectDuty;
